<template>
  <div class="fangpian-container">
    <!-- 顶部导航栏 -->
    <!-- <div class="top-nav">
      
    </div> -->
    
    <!-- 段位和进度条组合 -->
    <div class="level-progress-container">
      <div class="level-header">
        <div class="level-display">
          <span class="level-title">防骗段位:</span>
          <span class="level-value">{{ levelNames[currentLevel] }}</span>
        </div>
        <div class="nav-buttons">
        <div class="history-btn" @click="showHistory">
          <span class="btn-icon">📋</span>
          历史记录
        </div>
      </div>
      </div>
      <div class="progress-row">
        <div class="level-progress-bar">
          <div class="level-progress-fill" :style="{ width: Math.min(100, levelProgress) + '%' }"></div>
        </div>
        <span class="level-progress-percent">{{ Math.min(100, Math.round(levelProgress)) }}%</span>
      </div>
    </div>

    <!-- 难度选择 -->
<div class="difficulty-selector">
      <div class="difficulty-label">防诈骗难度:</div>
      <div class="difficulty-options">
        <div 
          v-for="option in difficultyOptions" 
          :key="option.value" 
          class="difficulty-option" 
          :class="{ active: selectedDifficulty === option.value }"
          @click="changeDifficulty(option.value)"
        >
          {{ option.label }}
        </div>
      </div>
    </div>

    <!-- 应用介绍对话框 -->
    <div class="app-intro-dialog" v-if="showAppIntro">
      <div class="intro-content">
        <div class="intro-header">
          <h2>{{ appIntroduction.title }}</h2>
          <div class="close-btn" @click="closeAppIntro">×</div>
        </div>
        <div class="intro-body">
          <p v-for="(paragraph, index) in appIntroduction.content.split('\n\n')" :key="index">{{ paragraph }}</p>
        </div>
        <div class="intro-footer">
          <button @click="closeAppIntro">我知道了</button>
        </div>
      </div>
    </div>
    
    <!-- 历史记录对话框 -->
    <div class="history-dialog" v-if="showHistoryDialog">
      <div class="history-content">
        <div class="history-header">
          <h2>历史记录</h2>
          <div class="close-btn" @click="closeHistory">×</div>
        </div>
        
        <div class="history-list" v-if="history.length > 0">
          <div class="history-item" v-for="(item, index) in history" :key="index">
            <div class="history-item-header">
              <div class="history-date">{{ item.date }}</div>
              <div class="history-level">{{ item.level }}</div>
              <div class="history-result" :class="{'correct': item.isCorrect, 'wrong': !item.isCorrect}">
                {{ item.isCorrect ? '✓ 正确' : '✗ 错误' }}
              </div>
            </div>
            
            <div class="history-message">
              <div class="message-sender">{{ item.message.sender }}</div>
              <div class="message-content">{{ item.message.content }}</div>
              <div class="message-type" :class="{'fraud': item.message.isFraud, 'normal': !item.message.isFraud}">
                {{ item.message.isFraud ? '诈骗短信' : '正常短信' }}
              </div>
            </div>
          </div>
        </div>
        
        <div class="empty-history" v-else>
          <p>暂无历史记录</p>
        </div>
        
        <div class="history-footer">
          <button @click="closeHistory">关闭</button>
        </div>
      </div>
    </div>

    <!-- 短信展示区 -->
    <div class="sms-display" :class="{'fraud': currentMessage.isFraud && showResult && isCorrect, 'normal': !currentMessage.isFraud && showResult && isCorrect}">
      <div class="sms-header">
        <div class="sender">{{ currentMessage.sender }}</div>
        <div class="time">{{ currentMessage.time }}</div>
      </div>
      <div class="sms-content">{{ currentMessage.content }}</div>
    </div>

    <!-- 操作按钮区 -->
    <div class="action-buttons" v-if="!showResult">
      <button class="generate-btn" @click="generateMessage" :disabled="loading">生成短信</button>
      <button class="fraud-btn" @click="judgeMessage(true)" :disabled="loading || !currentMessage.content">判断为诈骗</button>
      <button class="normal-btn" @click="judgeMessage(false)" :disabled="loading || !currentMessage.content">判断为正常</button>
    </div>

    <!-- 结果反馈区 -->
    <div class="result-feedback" v-if="showResult">
      <div class="result-status" :class="{'correct': isCorrect, 'wrong': !isCorrect}">
        <span class="result-icon">{{ isCorrect ? '✅' : '❌' }}</span>
        <span>{{ getFeedbackMessage() }}</span>
      </div>
      
      <div class="feature-analysis">
        <h3>特征分析</h3>
        <ul>
          <li v-for="(feature, index) in currentMessage.features" :key="index">{{ feature }}</li>
        </ul>
      </div>

      <div class="similar-cases">
        <h3>同类案例</h3>
        <div class="case-item" v-for="(item, index) in similarCases" :key="index">
          <div class="case-sender">{{ item.sender }}</div>
          <div class="case-content">{{ item.content }}</div>
        </div>
      </div>

      <button class="next-btn" @click="nextMessage">下一条</button>
    </div>

    <!-- 加载遮罩 -->
    <div class="loading-mask" v-if="loading">
      <div class="loading-spinner"></div>
    </div>

    <!-- 成就提示 -->
    <div class="achievement-popup" v-if="showAchievement">
      <div class="achievement-content">
        <h3>成就解锁!</h3>
        <div class="achievement-name">{{ currentAchievement.name }}</div>
        <div class="achievement-desc">{{ currentAchievement.description }}</div>
        <button @click="closeAchievement">确定</button>
      </div>
    </div>

    <!-- Toast提示 -->
    <div class="toast" v-if="showToast">{{ toastMessage }}</div>
    
    <!-- 底部导航栏 -->
    <div class="bottom-nav">
      <div class="nav-item" :class="{ active: activeTab === 'home' }" @click="activeTab = 'home'">
        <span class="nav-icon">🏠</span>
        <span>首页</span>
      </div>
      <div class="nav-item" :class="{ active: activeTab === 'intro' }" @click="showAppIntroPage">
        <span class="nav-icon">ℹ️</span>
        <span>应用介绍</span>
      </div>
    </div>
    
    
    
    <!-- 升级弹窗 -->
    <div class="level-up-popup" v-if="showAchievement && currentAchievement.name.includes('晋升')">
      <div class="level-up-content">
        <div class="level-up-header">
          <img src="https://img.icons8.com/color/96/000000/prize.png" alt="升级奖杯" />
          <h2>恭喜晋级!</h2>
        </div>
        <div class="level-up-body">
          <div class="level-up-name">{{ currentAchievement.name }}</div>
          <div class="level-up-desc">{{ currentAchievement.description }}</div>
          <div class="level-up-confetti"></div>
        </div>
        <button class="level-up-btn" @click="closeAchievement">太棒了!</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Fangpian',
  data() {
    return {
      // 用户段位
      currentLevel: 0,
      levelNames: ['萌新', '初级', '中级', '高级', '反诈专家'],
      
      // 当前短信
      currentMessage: {
        sender: '',
        time: '',
        content: '',
        isFraud: false,
        features: []
      },
      
      // 相似案例
      similarCases: [],
      
      // 短信缓存
      messageCache: [],
      
      // 状态控制
      loading: false,
      showResult: false,
      isCorrect: false,
      
      // 成就系统
      correctStreak: 0,
      fraudTypesLearned: {},
      showAchievement: false,
      currentAchievement: {
        name: '',
        description: ''
      },
      
      // Toast提示
      showToast: false,
      toastMessage: '',
      
      // 历史记录
      history: [],
      showHistoryDialog: false,
      
      // 应用介绍
      showAppIntro: false,
      appIntroduction: {
        title: "防诈骗训练应用",
        content: "这是一款帮助上了年纪的用户识别和防范短信诈骗的训练应用。通过模拟真实的诈骗短信场景，提高用户的防诈骗意识和辨别能力。\n\n应用特点：\n· 多种诈骗类型训练\n· 难度逐级提升\n· 详细的特征分析\n· 相似案例参考\n· 成就系统激励\n\n通过持续训练，您将能够更好地保护自己免受电信诈骗的侵害。"
        +"\n\n本应用所有短信内容均为AI模拟生成的教学案例，不涉及任何真实信息，仅用于防诈骗知识教学与训练，请勿轻信或模仿，本应用不对任何误判后果负责。"
      },
      
      // 导航栏
      activeTab: 'home',
      
      // 诈骗难度
      selectedDifficulty: 2, // 默认中等难度
      difficultyOptions: [
        { value: 1, label: '简单' },
        { value: 2, label: '中等' },
        { value: 3, label: '困难' }
      ],
      
      // 段位进度
      levelProgress: 0
    };
  },
  created() {
    // 从localStorage加载用户数据
    this.loadUserData();
    // 加载默认短信数据
    this.loadDefaultMessages();
  },
  methods: {
    // 加载用户数据
    loadUserData() {
      const userData = localStorage.getItem('fangpian_user_data');
      if (userData) {
        const data = JSON.parse(userData);
        this.currentLevel = data.level || 0;
        this.correctStreak = data.correctStreak || 0;
        this.fraudTypesLearned = data.fraudTypesLearned || {};
        this.history = data.history || [];
        this.levelProgress = data.levelProgress || 0;
        this.selectedDifficulty = data.selectedDifficulty || 2;
      }
    },
    
    // 保存用户数据
    saveUserData() {
      const userData = {
        level: this.currentLevel,
        correctStreak: this.correctStreak,
        fraudTypesLearned: this.fraudTypesLearned,
        history: this.history,
        levelProgress: this.levelProgress,
        selectedDifficulty: this.selectedDifficulty
      };
      localStorage.setItem('fangpian_user_data', JSON.stringify(userData));
    },
    
    // 加载默认短信数据
    loadDefaultMessages() {
      // 默认短信数据集
      const defaultMessages = [
        {
          sender: "中国银行",
          time: "09:15",
          content: "尊敬的客户，您的银行卡已被冻结，请立即拨打电话400-123-4567进行解冻操作，否则将无法正常使用。",
          isFraud: true,
          features: [
            "使用紧急语气制造恐慌",
            "没有提供个人信息验证",
            "要求立即行动",
            "使用通用客服号码而非官方渠道",
            "没有称呼客户姓名"
          ],
          similarCases: [
            {
              sender: "工商银行",
              content: "您的银行账户存在安全风险，请立即联系客服400-888-5555处理，否则账户将被锁定。"
            },
            {
              sender: "建设银行",
              content: "您的银行卡已被系统锁定，请拨打处理热线400-777-6666进行解锁操作。"
            }
          ]
        },
        {
          sender: "顺丰快递",
          time: "14:30",
          content: "您好，您的快递已到达【北京海淀区营业点】，请及时领取。如有问题请联系快递员小王(13812345678)。",
          isFraud: false,
          features: [
            "提供了具体的快递位置信息",
            "包含正常的快递员联系方式",
            "语气平和，没有紧急催促",
            "没有要求点击链接或转账",
            "符合正常快递通知格式"
          ],
          similarCases: [
            {
              sender: "中通快递",
              content: "您的包裹已送达【上海徐汇区自提点】，请凭取件码8765在24小时内领取。"
            },
            {
              sender: "圆通速递",
              content: "您好，您的快递已到达【广州天河区网点】，请尽快领取。快递员：李师傅(13987654321)"
            }
          ]
        },
        {
          sender: "公安局",
          time: "10:45",
          content: "您的身份信息涉嫌违法犯罪活动，现已被立案调查，请立即联系办案警官李警官(+852-13579086)，否则将面临法律制裁。",
          isFraud: true,
          features: [
            "使用恐吓性语言制造恐慌",
            "提供的联系方式为香港区号(+852)，而非大陆公安机关",
            "没有提供具体案件编号和详情",
            "要求立即联系，制造紧迫感",
            "公安机关不会通过短信方式通知案件"
          ],
          similarCases: [
            {
              sender: "检察院",
              content: "您的银行账户涉嫌洗钱，已被冻结，请立即联系专案组张检察官(+852-98765432)协助调查。"
            },
            {
              sender: "最高法院",
              content: "您有一起案件需立即处理，请联系王法官(+853-12345678)，否则将被强制执行。"
            }
          ]
        }
      ];
      
      // 将默认短信添加到缓存
      this.messageCache = [...defaultMessages];
      
      // 随机选择一条显示
      const randomIndex = Math.floor(Math.random() * this.messageCache.length);
      const selectedMessage = this.messageCache.splice(randomIndex, 1)[0];
      
      this.currentMessage = {
        sender: selectedMessage.sender,
        time: selectedMessage.time,
        content: selectedMessage.content,
        isFraud: selectedMessage.isFraud,
        features: selectedMessage.features
      };
      
      this.similarCases = selectedMessage.similarCases;
      
      // 在后台预加载更多短信
      this.$nextTick(() => {
        this.preloadMoreMessages();
      });
    },
    
    // 在后台预加载更多短信
    async preloadMoreMessages() {
      try {
        const response = await this.callAIModel({
          type: this.getRandomFraudType(),
          level: this.currentLevel,
          difficulty: this.selectedDifficulty
        });
        
        const content = response.data.choices[0].message.content;
        let messageData;
        
        if (typeof content === 'string') {
          const jsonMatch = content.match(/```json\s*([\s\S]*?)\s*```/) || 
                           content.match(/\{[\s\S]*\}/);
          
          if (jsonMatch) {
            messageData = JSON.parse(jsonMatch[1] || jsonMatch[0]);
            
            this.messageCache.push({
              sender: messageData.sender,
              time: messageData.time || this.getCurrentTime(),
              content: messageData.content,
              isFraud: messageData.isFraud,
              features: messageData.features || [],
              similarCases: messageData.similarCases || []
            });
          }
        }
      } catch (error) {
        console.error('预加载短信失败:', error);
      }
    },
    
    // 生成短信
    async generateMessage() {
      this.loading = true;
      
      try {
        // 优先使用缓存中的短信
        if (this.messageCache.length > 0) {
          const randomIndex = Math.floor(Math.random() * this.messageCache.length);
          const cachedMessage = this.messageCache.splice(randomIndex, 1)[0];
          
          this.currentMessage = {
            sender: cachedMessage.sender,
            time: cachedMessage.time,
            content: cachedMessage.content,
            isFraud: cachedMessage.isFraud,
            features: cachedMessage.features
          };
          
          this.similarCases = cachedMessage.similarCases;
          
          // 在后台继续预加载
          this.$nextTick(() => {
            this.preloadMoreMessages();
          });
        } else {
          // 缓存为空，直接调用AI接口生成短信
          const response = await this.callAIModel({
            type: this.getRandomFraudType(),
            level: this.currentLevel,
            difficulty: this.selectedDifficulty
          });
          
          // 解析返回结果
          let messageData;
          const content = response.data.choices[0].message.content;
          
          // 检查返回内容是否需要解析JSON
          if (typeof content === 'string') {
            // 尝试提取JSON部分（处理可能包含的markdown格式）
            const jsonMatch = content.match(/```json\s*([\s\S]*?)\s*```/) || 
                             content.match(/\{[\s\S]*\}/);
            
            if (jsonMatch) {
              try {
                messageData = JSON.parse(jsonMatch[1] || jsonMatch[0]);
              } catch (e) {
                console.error('JSON解析错误:', e);
                throw new Error('返回数据格式错误');
              }
            } else {
              throw new Error('未找到有效的JSON数据');
            }
          } else {
            // 已经是对象格式
            messageData = content;
          }
          
          this.currentMessage = {
            sender: messageData.sender,
            time: messageData.time || this.getCurrentTime(),
            content: messageData.content,
            isFraud: messageData.isFraud,
            features: messageData.features || []
          };
          
          // 获取相似案例
          this.similarCases = messageData.similarCases || [];
        }
      } catch (error) {
        console.error('生成短信失败:', error);
        this.showToastMessage('网络异常，请稍后重试');
      } finally {
        this.loading = false;
      }
    },
    
    // 调用AI模型
    async callAIModel(params) {
      // 随机决定是否为诈骗短信
      const isFraud = Math.random() > 0.5;
      
      // 构建提示词，使用fangpian_prompt.md中的内容
      const promptBase = `# 角色：  
专业诈骗/正常短信生成器，根据参数动态生成符合要求的短信样本，并提供结构化分析  

# 简介：  
专为安全测试、防骗训练设计的智能文本生成工具，可精确控制短信类型、难度级别，并输出包含深度特征分析的JSON格式结果  

# 技能：  
- 根据isFraud参数生成逼真诈骗或正常短信  
- 支持多级难度控制（通过levelNames参数）  
- 按type参数定制短信内容类型  
- 自动提取短信特征并匹配相似案例库  

# 规则：  
- 诈骗短信需符合现实案例特征但避免违法内容  
- 正常短信需模仿真实生活场景  
- 所有输出必须严格遵循指定JSON格式  
- 特征分析和相似案例需基于真实数据训练模型生成  

# 工作流程：  
1. 参数解析：验证isFraud、levelNames、type参数有效性  
2. 内容生成：  
   - 诈骗短信：调用诈骗话术库+难度调整算法  
   - 正常短信：调用生活场景模板库  
3. 特征提取：分析短信语言模式、紧急程度等特征  
4. 案例匹配：从相似案例库中检索相关历史记录  
5. JSON构建：按规范格式组织所有字段`;

      // 添加具体任务指令
      const taskInstruction = `
# 当前任务：
- 生成一条${isFraud ? '诈骗' : '正常'}短信
- 短信类型：${params.type}
- 段位级别：${this.levelNames[params.level]}（${params.level + 1}/5）
- 用户选择难度：${this.difficultyOptions.find(opt => opt.value === params.difficulty).label}
- 如果是诈骗短信，难度越高越隐蔽，难度越低越明显

# 输出要求：
请生成一个JSON对象，包含以下字段：
- sender: 发送方名称
- time: 时间（格式：HH:MM）
- content: 短信内容
- isFraud: ${isFraud}
- features: 特征分析，数组格式，包含3-5个特征点
- similarCases: 相似案例，数组格式，包含3个案例，每个案例有sender和content字段`;
      
      const prompt = promptBase + taskInstruction;
      
      return await axios.post('https://api.siliconflow.cn/v1/chat/completions', {
        model: 'deepseek-ai/DeepSeek-R1-Distill-Qwen-32B',
        messages: [{
          role: 'user',
          content: prompt
        }],
        stream: false,
        max_tokens: 1024,
        temperature: 0.7,
        response_format: {
          type: 'json_object'
        }
      }, {
        headers: {
          Authorization: 'Bearer '+ process.env.VUE_APP_API_KEY,
          'Content-Type': 'application/json'
        }
      });
    },
    
    // 获取随机诈骗类型
    getRandomFraudType() {
      const types = ['冒充银行', '快递通知', '公检法通知', '中奖通知', '网购退款', '家人紧急求助'];
      // 根据用户段位过滤可用类型
      const availableTypes = types.filter((_, index) => {
        return index <= this.currentLevel + 1; // 每个段位解锁1-2种类型
      });
      
      const randomIndex = Math.floor(Math.random() * availableTypes.length);
      return availableTypes[randomIndex];
    },
    
    // 获取当前时间
    getCurrentTime() {
      const now = new Date();
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    },
    
    // 判断短信
    judgeMessage(isFraud) {
      // 如果短信内容为空，显示提示
      if (!this.currentMessage.content) {
        this.showToastMessage('短信未生成，请先生成短信');
        return;
      }
      
      this.loading = true;
      
      // 模拟网络请求
      setTimeout(() => {
        this.showResult = true;
        this.isCorrect = isFraud === this.currentMessage.isFraud;
        
        // 更新用户数据
        this.updateUserData();
        
        // 记录历史
        this.recordHistory();
        
        this.loading = false;
      }, 800);
    },
    
    // 获取反馈信息
    getFeedbackMessage() {
      if (this.isCorrect) {
        if (this.currentMessage.isFraud) {
          return '太棒了！你成功识破了诈骗！';
        } else {
          return '太棒了！这确实是一条正常短信！';
        }
      } else {
        if (this.currentMessage.isFraud) {
          return '很遗憾，你被骗了！这是一条诈骗短信！';
        } else {
          return '很遗憾，本条短信是正常的，判断错误！';
        }
      }
    },
    
    // 更新用户数据
updateUserData() {
  if (this.isCorrect) {
    // 连续答对计数
    this.correctStreak++;
    
    // 记录已学习的诈骗类型
    if (this.currentMessage.isFraud) {
      const fraudType = this.extractFraudType(this.currentMessage);
      if (fraudType) {
        this.fraudTypesLearned[fraudType] = true;
      }
    }
    
    // 更新段位进度
    this.levelProgress += 10; // 每答对一题增加33.33%的进度
    
    // 检查是否升级
    if (this.correctStreak >= 3 && this.currentLevel < this.levelNames.length - 1) {
      const oldLevel = this.currentLevel;
      this.currentLevel++;
      this.levelProgress = 0; // 升级后重置进度
      
      // 检查是否已经显示过这个段位的晋升成就
      const levelAchievementKey = `level_${this.currentLevel}`;
      if (!this.fraudTypesLearned[levelAchievementKey]) {
        this.showAchievement = true;
        this.currentAchievement = {
          name: `晋升为${this.levelNames[this.currentLevel]}`,
          description: '恭喜你提升了段位！解锁更多诈骗类型。'
        };
        // 标记该段位晋升成就已显示
        this.fraudTypesLearned[levelAchievementKey] = true;
      }
    }
    
    // 检查成就
    this.checkAchievements();
  } else {
    // 答错重置连续正确计数
    this.correctStreak = 0;
    // 答错减少进度
    this.levelProgress = Math.max(0, this.levelProgress - 16.67); // 答错减少16.67%的进度，但不低于0
  }
  
  // 保存用户数据
  this.saveUserData();
},

// 提取诈骗类型
extractFraudType(message) {
  // 简单实现，实际应从AI返回结果中获取
  if (message.sender.includes('银行')) return '冒充银行';
  if (message.sender.includes('快递')) return '快递通知';
  if (message.sender.includes('公安') || message.sender.includes('法院')) return '公检法通知';
  if (message.content.includes('中奖')) return '中奖通知';
  if (message.content.includes('退款')) return '网购退款';
  if (message.content.includes('妈') || message.content.includes('爸')) return '家人紧急求助';
  return '其他';
},

// 检查成就
checkAchievements() {
  // 火眼金睛：连续5次正确
  if (this.correctStreak === 5 && !this.fraudTypesLearned['火眼金睛']) {
    this.showAchievement = true;
    this.currentAchievement = {
      name: '火眼金睛',
      description: '连续5次正确判断，你的眼光真毒辣！'
    };
    // 标记成就已达成
    this.fraudTypesLearned['火眼金睛'] = true;
  }
  
  // 反诈专家：掌握3类诈骗
  const learnedTypes = Object.keys(this.fraudTypesLearned).length;
  if (learnedTypes === 3 && !this.fraudTypesLearned['反诈专家']) {
    this.showAchievement = true;
    this.currentAchievement = {
      name: '反诈专家',
      description: '已掌握3种诈骗类型，继续加油！'
    };
    // 标记成就已达成
    this.fraudTypesLearned['反诈专家'] = true;
  }
},

// 记录历史
recordHistory() {
  const record = {
    date: new Date().toLocaleDateString(),
    level: this.levelNames[this.currentLevel],
    message: this.currentMessage,
    isCorrect: this.isCorrect
  };
  
  this.history.unshift(record);
  
  // 限制历史记录数量
  if (this.history.length > 50) {
    this.history.pop();
  }
},

// 下一条短信
nextMessage() {
  this.showResult = false;
  this.generateMessage();
},

// 关闭成就提示
closeAchievement() {
  this.showAchievement = false;
},

// 显示历史记录
showHistory() {
  this.showHistoryDialog = true;
},

// 关闭历史记录
closeHistory() {
  this.showHistoryDialog = false;
},

// 显示应用介绍
toggleAppIntro() {
  this.showAppIntro = !this.showAppIntro;
},

// 关闭应用介绍
closeAppIntro() {
  this.showAppIntro = false;
},

// 显示应用介绍页面
showAppIntroPage() {
  this.activeTab = 'intro';
  this.showAppIntro = true;
},

// 切换难度
changeDifficulty(difficulty) {
  this.selectedDifficulty = difficulty;
  this.saveUserData();
  this.showToastMessage(`已切换到${this.difficultyOptions.find(opt => opt.value === difficulty).label}难度`);
},

// 显示Toast提示
showToastMessage(message) {
  this.toastMessage = message;
  this.showToast = true;
  
  setTimeout(() => {
    this.showToast = false;
  }, 3000);
}
  }}
</script>

<style scoped>
.fangpian-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #333;
  position: relative;
  min-height: 100vh;
  background-color: #f8f9fa;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  background-image: linear-gradient(to bottom, #f9f9f9, #f0f2f5);
}

/* 顶部导航栏 */
.top-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
  padding: 15px;
  border-bottom: 2px solid rgba(224, 224, 224, 0.5);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.level-display {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.level-title {
  color: #444;
}

.level-value {
  color: #2c3e50;
  margin-left: 8px;
  background: linear-gradient(135deg, #e6f2ff, #d4e6ff);
  padding: 5px 12px;
  border-radius: 20px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.15);
  border: 1px solid rgba(0, 123, 255, 0.1);
  transition: all 0.3s ease;
}

.level-value:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.25);
}

.nav-buttons {
  display: flex;
  gap: 10px;
  padding-right: 0px;
}

.history-btn, .intro-btn {
  padding: 8px 14px;
  background: linear-gradient(to bottom, #ffffff, #f5f7fa);
  border: 1px solid #e0e6ed;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  color: #3a4a5c;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.history-btn:hover, .intro-btn:hover {
  background: linear-gradient(to bottom, #f5f7fa, #edf1f7);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* 短信展示区 */
.sms-display {
  background-color: #fff;
  border-radius: 16px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  border-left: 5px solid #6c757d;
  position: relative;
  overflow: hidden;
}

.sms-display::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #6c757d, transparent);
  opacity: 0.5;
}

.sms-display.fraud {
  border-left: 5px solid #dc3545;
  background-color: #fff9f9;
  box-shadow: 0 8px 20px rgba(220, 53, 69, 0.1);
}

.sms-display.fraud::before {
  background: linear-gradient(90deg, #dc3545, transparent);
}

.sms-display.normal {
  border-left: 5px solid #28a745;
  background-color: #f9fff9;
  box-shadow: 0 8px 20px rgba(40, 167, 69, 0.1);
}

.sms-display.normal::before {
  background: linear-gradient(90deg, #28a745, transparent);
}

.sms-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sender {
  font-weight: bold;
  color: #2c3e50;
  font-size: 17px;
  letter-spacing: 0.3px;
}

.time {
  color: #7f8c8d;
  font-size: 14px;
  background-color: rgba(236, 240, 241, 0.5);
  padding: 3px 8px;
  border-radius: 12px;
}

.sms-content {
  line-height: 1.8;
  font-size: 16px;
  white-space: pre-wrap;
  text-align: left;
  color: #34495e;
  letter-spacing: 0.3px;
  padding: 5px 0;
}

/* 操作按钮区 */
.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.action-buttons button {
  padding: 14px 0;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.action-buttons button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.action-buttons button:hover::after {
  transform: translateY(0);
}

.generate-btn {
  width: 100%;
  background: linear-gradient(135deg, #0984e3, #0069d9);
  color: white;
  margin-bottom: 18px;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
  border-radius: 12px;
  font-size: 17px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.generate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 123, 255, 0.4);
}

.fraud-btn, .normal-btn {
  width: 48%;
  border-radius: 12px;
  font-size: 16px;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.fraud-btn {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
}

.fraud-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(220, 53, 69, 0.3);
}

.normal-btn {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: white;
}

.normal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(40, 167, 69, 0.3);
}

.action-buttons button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* 结果反馈区 */
.result-feedback {
  background-color: #fff;
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.result-feedback::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #6c757d, transparent);
}

.result-status {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
  padding: 15px;
  border-radius: 12px;
}

.result-status.correct {
  color: #27ae60;
  background-color: rgba(46, 204, 113, 0.08);
  border-bottom: 1px solid rgba(46, 204, 113, 0.2);
  padding-bottom: 18px;
  margin-bottom: 25px;
}

.result-status.correct::before {
  background: linear-gradient(90deg, #27ae60, transparent);
}

.result-status.wrong {
  color: #e74c3c;
  background-color: rgba(231, 76, 60, 0.08);
  border-bottom: 1px solid rgba(231, 76, 60, 0.2);
  padding-bottom: 18px;
  margin-bottom: 25px;
}

.result-status.wrong::before {
  background: linear-gradient(90deg, #e74c3c, transparent);
}

.result-status .result-icon {
  margin-right: 12px;
  font-size: 28px;
  background-color: rgba(255, 255, 255, 0.8);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.feature-analysis, .similar-cases {
  margin-bottom: 25px;
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
}

.feature-analysis h3, .similar-cases h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #2c3e50;
  border-left: 4px solid #3498db;
  padding-left: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.feature-analysis ul {
  padding-left: 20px;
  list-style-type: none;
}

.feature-analysis li {
  margin-bottom: 10px;
  line-height: 1.7;
  color: #34495e;
  padding-left: 8px;
  position: relative;
}

.feature-analysis li::before {
  content: "•";
  color: #3498db;
  font-weight: bold;
  font-size: 18px;
  position: absolute;
  left: -12px;
}

.case-item {
  background-color: #fff;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 15px;
  border-left: 4px solid #3498db;
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.case-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.case-sender {
  font-weight: bold;
  margin-bottom: 8px;
  color: #2c3e50;
  font-size: 15px;
}

.case-content {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  border-left: 2px solid #ecf0f1;
  padding-left: 10px;
  margin-left: 5px;
}

.next-btn {
  width: 100%;
  padding: 15px 0;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
  letter-spacing: 1px;
  margin-top: 15px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.next-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.next-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

.next-btn:hover::after {
  transform: translateY(0);
}

/* 加载遮罩 */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 成就提示 */
.achievement-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.achievement-content {
  background: linear-gradient(135deg, #fff, #f5f7fa);
  border-radius: 20px;
  padding: 30px;
  width: 85%;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.achievement-content::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.achievement-name {
  font-size: 24px;
  font-weight: bold;
  color: #f39c12;
  margin: 15px 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  display: inline-block;
}

.achievement-name::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f39c12, transparent);
}

.achievement-desc {
  margin-bottom: 25px;
  color: #555;
  font-size: 16px;
  line-height: 1.6;
}

.achievement-content button {
  padding: 12px 30px;
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(243, 156, 18, 0.3);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.achievement-content button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.achievement-content button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(243, 156, 18, 0.4);
}

.achievement-content button:hover::after {
  transform: translateY(0);
}

/* Toast提示 */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 14px;
  z-index: 1001;
}

/* 应用介绍对话框 */
.app-intro-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.intro-content {
  background-color: #fff;
  border-radius: 10px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.intro-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #e0e0e0;
  background-color: #f8f9fa;
}

.intro-header h2 {
  margin: 0;
  font-size: 20px;
  color: #2c3e50;
  font-weight: 600;
}

.intro-body {
  padding: 20px;
  overflow-y: auto;
  max-height: 60vh;
  text-align: left;
  line-height: 1.6;
}

.intro-body p {
  margin-bottom: 15px;
  color: #495057;
}

.intro-footer {
  padding: 15px 20px;
  border-top: 1px solid #e0e0e0;
  text-align: right;
  background-color: #f8f9fa;
}

.intro-footer button {
  padding: 8px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
}

.intro-footer button:hover {
  background-color: #0069d9;
}

/* 历史记录对话框 */
.history-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.history-content {
  background-color: #fff;
  border-radius: 10px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.history-header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-btn {
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 20px;
  max-height: 60vh;
}

.history-item {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.history-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}

.history-date {
  color: #666;
}

.history-level {
  color: #ff9800;
  font-weight: bold;
}

.history-result {
  font-weight: bold;
}

.history-result.correct {
  color: #4caf50;
}

.history-result.wrong {
  color: #ff6b6b;
}

.history-message {
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  border: 1px solid #eee;
}

.message-sender {
  font-weight: bold;
  margin-bottom: 5px;
}

.message-content {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.message-type {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
}

.message-type.fraud {
  background-color: #ffebee;
  color: #ff6b6b;
}

.message-type.normal {
  background-color: #e8f5e9;
  color: #4caf50;
}

.empty-history {
  padding: 30px;
  text-align: center;
  color: #999;
}

.history-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  text-align: right;
}

.history-footer button {
  padding: 8px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 0;
  width: 50%;
  cursor: pointer;
  color: #6c757d;
  transition: all 0.2s ease;
}

.nav-item.active {
  color: #007bff;
  font-weight: bold;
}

.nav-item .nav-icon {
  font-size: 24px;
  margin-bottom: 5px;
  display: block;
}

/* 难度选择 */
.difficulty-selector {
  background-color: #fff;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 22px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.difficulty-label {
  font-weight: 600;
  margin-bottom: 12px;
  color: #2c3e50;
  font-size: 16px;
  letter-spacing: 0.3px;
  position: relative;
  padding-left: 15px;
}

.difficulty-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 18px;
  background: linear-gradient(to bottom, #3498db, #2980b9);
  border-radius: 3px;
}

.difficulty-options {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  background-color: #f5f7fa;
  border-radius: 25px;
  position: relative;
  z-index: 1;
}

.difficulty-option {
  padding: 10px 0;
  border-radius: 20px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-align: center;
  flex: 1;
  margin: 0 3px;
  position: relative;
  z-index: 2;
  font-weight: 500;
}

.difficulty-option.active {
  color: white;
  box-shadow: 0 3px 8px rgba(0, 123, 255, 0.25);
}

.difficulty-option.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #3498db, #2980b9);
  border-radius: 20px;
  z-index: -1;
  transition: all 0.3s ease;
}

.difficulty-option:not(.active):hover {
  background-color: rgba(52, 152, 219, 0.1);
}

/* 段位进度条 */
.level-progress-container {
  background-color: #fff;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.level-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.level-progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-weight: 600;
  color: #2c3e50;
  font-size: 16px;
  letter-spacing: 0.3px;
}

.level-progress-percent {
  color: #3498db;
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(52, 152, 219, 0.2));
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.1);
  border: 1px solid rgba(52, 152, 219, 0.1);
  transition: all 0.3s ease;
  white-space: nowrap;
  min-width: 45px;
  text-align: center;
}

.level-progress-percent:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.2);
}

.progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.level-progress-bar {
  height: 12px;
  background-color: #edf2f7;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.03);
  flex: 1;
}

.level-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #2980b9);
  border-radius: 20px;
  transition: width 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}

.level-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-size: 20px 20px;
  animation: progressAnimation 1s linear infinite;
}

@keyframes progressAnimation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 0;
  }
}

/* 升级弹窗 */
.level-up-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.level-up-content {
  background: linear-gradient(135deg, #fff8e1, #fffdf7);
  border-radius: 20px;
  padding: 30px;
  width: 90%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 80px rgba(255, 215, 0, 0.2);
  animation: celebrateIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 3px solid rgba(255, 215, 0, 0.5);
  position: relative;
  overflow: hidden;
}

@keyframes celebrateIn {
  0% { transform: scale(0.5) rotate(-5deg); opacity: 0; }
  50% { transform: scale(1.05) rotate(3deg); }
  70% { transform: scale(0.95) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.level-up-content::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
  animation: rotateGlow 15s linear infinite;
}

@keyframes rotateGlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.level-up-header {
  margin-bottom: 20px;
  position: relative;
}

.level-up-header img {
  width: 100px;
  height: 100px;
  margin-bottom: 15px;
  filter: drop-shadow(0 5px 15px rgba(255, 152, 0, 0.5));
  animation: floatTrophy 3s ease-in-out infinite;
}

@keyframes floatTrophy {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.level-up-header h2 {
  color: #f39c12;
  font-size: 32px;
  margin: 0;
  text-shadow: 0 2px 5px rgba(0,0,0,0.15);
  background: linear-gradient(to right, #f1c40f, #e67e22);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  letter-spacing: 1px;
}

.level-up-name {
  font-size: 26px;
  font-weight: bold;
  color: #d35400;
  margin: 20px 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.1);
  position: relative;
  display: inline-block;
}

.level-up-name::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f39c12, transparent);
}

.level-up-desc {
  color: #444;
  margin-bottom: 25px;
  font-size: 17px;
  line-height: 1.6;
  padding: 0 15px;
}

.level-up-btn {
  padding: 14px 35px;
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(243, 156, 18, 0.4);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  letter-spacing: 1px;
}

.level-up-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.level-up-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(243, 156, 18, 0.5);
}

.level-up-btn:hover::after {
  transform: translateY(0);
}

.level-up-confetti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background-image: 
    radial-gradient(circle, #f39c12 2px, transparent 2px),
    radial-gradient(circle, #3498db 3px, transparent 3px),
    radial-gradient(circle, #e74c3c 2px, transparent 2px),
    radial-gradient(circle, #2ecc71 3px, transparent 3px),
    radial-gradient(circle, #9b59b6 2px, transparent 2px);
  background-size: 
    100px 100px,
    120px 120px,
    150px 150px,
    200px 200px,
    180px 180px;
  background-position: 
    0 0,
    40px 60px,
    130px 270px,
    70px 370px,
    180px 150px;
  animation: confettiAnimation 10s linear infinite;
}

@keyframes confettiAnimation {
  0% { background-position: 0 0, 40px 60px, 130px 270px, 70px 370px, 180px 150px; }
  100% { background-position: 100px 100px, 140px 160px, 230px 370px, 170px 470px, 280px 250px; }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .fangpian-container {
    padding: 8px;
    padding-bottom: 70px; /* 为底部导航栏留出空间 */
  }
  
  .sms-content {
    font-size: 14px;
  }
  
  .action-buttons button {
    font-size: 14px;
    padding: 10px 0;
  }
}
</style>